<template>
  <div class="authentication">
    <div class="com-top-nav">
      <van-nav-bar
        title="个人信息"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div>
      <!-- <div class="info-header">
        <img src="../../../static/img/person.jpg" alt="">
        <p class="info-name">米开朗杰森</p>
        <p class="info-sign">签名：我是一只小花猫</p>
      </div> -->
      <van-cell-group>
        <van-field
          v-model="formData.name"
          required
          clearable
          label="姓名"
          placeholder="请输入姓名"
        />
        <zx-picker title="性别" :dataList="sexList" v-model="formData.sex"></zx-picker>
        <zx-picker title="年龄" :dataList="ageList" v-model="formData.age"></zx-picker>
        <van-field
          label="所在学校"
          v-model="formData.schoolName"
          placeholder="请填写学校名称"
          required
        />
        <van-field
          v-model="formData.subtitle"
          clearable
          label="签名"
          placeholder="请输入个性签名"
        />
        <van-field
          type="textarea"
          v-model="formData.suggestion"
          clearable
          :autosize="{maxHeight: '300', minHeight: '100'}"
          placeholder="请输入您的自我评价"
        />

        <!--<van-uploader class="auth-img" :after-read="onRead">-->
          <!--<div>-->
            <!--<van-icon name="photograph"/>-->
            <!--<p>企业营业执照</p>-->
          <!--</div>-->
        <!--</van-uploader>-->
      </van-cell-group>
      <div class="button">
        <van-button size="large" @click="handleSubmit">确定</van-button>
      </div>

    </div>
  </div>
</template>
<script>
  import validator from '../../common/validatorFunction';
  import zxPicker from '../../components/zx-picker'

  export default {
    components: {
      zxPicker
    },
    data(){
      return {
        isShowError: false,
        errorTips: '',
        sexList: [{values: ['男', '女']}],
        ageList: [{values: []}],
        formData: {
          name: '',
          sex: ['女'],
          age: [21],
          schoolName: '',
          suggestion: '',
          subtitle:'',
        },
        rules: {
          name: [
            {require: true, message: '请输入姓名'}
          ],
          schoolName: [
            {require: true, message: '请填写学校名称'}
          ],
          suggestion: [
            {require: true, message: '请输入您的自我评价'}
          ]
        }
      }
    },
    mounted() {
      let i = 0;
      while (i < 100) {
        i++;
        this.ageList[0].values.push(i);
      }
      console.log('进入页面');
    },
    methods: {
      onRead(file) {
        console.log(file)
      },
      onClickLeft() {
        this.$router.go(-1);
      },
      confirm(columnsNum) {
        this.showArea = false;
        let area = '';
        columnsNum.forEach(item => {
          area += item.name + ' ';
        })
        this.formData.area = area;
      },
      cancel() {
        this.showArea = false;
      },
      handleSubmit() {
        // 保存数据
        const rulesResult = validator(this.formData, this.rules);
        console.log(rulesResult);
        if (rulesResult.result) {
          let age = this.formData.age[0];
          let sex = this.formData.sex[0];
          let params ={
            name:this.formData.name,
            uid:JSON.parse(sessionStorage.getItem('user')).uid,
            age:age,
            subtitle:this.formData.subtitle,
            sex:sex,
            school:this.formData.schoolName,
            asm:this.formData.suggestion
          }
          this.axios.get('/api/user/info/create',{params}).then(res=>{
            if(res.data.err_code == 0){
            this.$toast({message:'添加个人信息成功', position: 'middle'});
            }else{
              this.$toast({message:'添加个人信息失败', position: 'middle'});
            }
          })
        } else {
          const alertMessage = [];
          for (const key in rulesResult.detail) {
            if (!rulesResult.detail[key].isPass) {
              alertMessage.push(rulesResult.detail[key].message);
            }
          }
          this.isShowError = true;
          this.errorTips = alertMessage[0];
          this.$toast({message:this.errorTips, position: 'middle'});
        }
      }
    }
  }
</script>

<style scoped lang="less" type="text/less">
  @import url('../../../static/style/var');
  .is-require {
    &::before {
      content: '*';
      position: absolute;
      left: 7px;
      font-size: 14px;
      color: #f44;
    }
  }
  .button {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 30px;
  }

  .info-header {
    text-align: center;
    background-color: #ffffff;
    padding: 50px 0 10px 0;
    margin-top: 50px;
    img {
      position: absolute;
      top: 90px;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 90px;
      height: 90px;
      border-radius: 50%;
    }
    .info-name {
      color: @font-dault-color;
      font-size: @title-font-size; /*px*/
    }
    .info-sign {
      color: @weak-tips-color;
      font-size: @normal-font-size; /*px*/
      line-height: 1.5;
    }
  }

</style>
